<template>
  <el-row class="tabcontent-container">
    <el-row>
      <el-form :inline="true" :model="queryCriteria">
        <el-form-item label="函数：">
          <el-input v-model="queryCriteria.name" placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item label="描述：">
          <el-select
            v-model="queryCriteria.type"
            placeholder="选择类型"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="onReset">
            重置
          </el-button>
          <el-button type="primary" @click="onSearch">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-table
      :data="pagination.list"
      border
      style="width: 100%"
    >
      <el-table-column
        v-for="item in columns"
        :key="item.label"
        :label="item.label"
        :prop="item.field"
      />
    </el-table>
    <pagination
      :pagination="pagination"
      @page-size-changed="pageSizeChangeHandler"
      @page-changed="pageChangeHandler"
    />
  </el-row>
</template>

<script>
import queryPageForm from './queryPageForm.js'
import { deepMerge } from '../utils/index'
import { getFunctionPage } from '../api/workDevelopment'

export default {
  mixins: [queryPageForm],
  data() {
    const queryCriteria = this.initQueryCriteria()
    return {
      queryCriteria: queryCriteria,
      columns: [
        { name: 'name', label: '名称', field: 'name' },
        { name: 'type', label: '类型', field: 'type' },
        { name: 'subtype', label: '子类型', field: 'subtype' },
        { name: 'description', label: '描述', field: 'description' }
      ],
      typeOptions: [
        { label: '全部', value: '' },
        { label: '内置函数', value: '内置函数' },
        { label: '建表语句', value: '建表语句' },
        { label: 'CataLog', value: 'CataLog' },
        { label: '设置参数', value: '设置参数' },
        { label: 'UDP', value: 'UDP' },
        { label: 'Other', value: 'Other' }
      ]
    }
  },
  methods: {
    // 初始化搜索表单
    initQueryCriteria(form = {}) {
      return deepMerge(form, {
        name: '',
        category: '',
        type: '',
        subtype: '',
        enabled: '',
        sorts: [{
          fieldName: '',
          direction: ''
        }]
      })
    },
    // 搜索
    executeQueryPage() {
      getFunctionPage(this.createQueryParams()).then((data) => {
        this.queryResultHandler(data)
      })
    },
    onReset() {
      this.queryCriteria = this.initQueryCriteria()
      this.executeQueryPage()
    },
    onSearch() {
      this.executeQueryPage()
    },
    notifySuccess(text) {
      this.$q.notify({ type: 'positive', position: 'top', message: text })
    },
    notifyFailure(text) {
      this.$q.notify({ type: 'negative', position: 'top', message: text })
    }
  }
}
</script>

<style scoped lang="less">
.tabcontent-container{
  width: 100%;
  height: 100%;
  overflow: auto;
}
:deep(thead tr) {
  background-color: #f5f5f5;
  th {
    text-align: center;
  }
}
@order-cell-width: 56px;

.order-cell {
  width: @order-cell-width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;
}

.success {
  background-color: #52c41a;
}

.failure {
  background-color: #ff4d4f;
}

.table-container {
  background-color: white;
  margin-top: 16px;
  padding: 0px 16px;
  border-radius: 4px;
  width: 100%;
}

.text-subtitle1 {
  margin-left: -16px;
}

.second-row {
  padding-top: 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
</style>
